<!-- Pagination.vue -->
<template>
  <el-pagination
    :current-page.sync="pageIndex"
    :page-size="pageSize"
    :total="total"
    prev-text=""
    next-text=""
    layout="prev, pager, next"
    class="pagination-center"
    @current-change="handleCurrentChange"
  />
</template>

<script>
export default {
  props: {
    // 从父组件传入当前页码
    pageIndex: {
      type: Number,
      default: 1
    },
    // 从父组件传入每页显示的条数
    pageSize: {
      type: Number,
      default: 4
    },
    // 可选：传入总条数，用于显示总页数
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      // 当每页显示条数改变时触发
      this.$emit('update:pageSize', val)
      // 可能还需要通知父组件更新查询参数
      this.$emit('page-size-change', val)
    },
    handleCurrentChange(val) {
      // 当当前页码改变时触发
      this.$emit('update:currentPage', val)
      // 可能还需要通知父组件更新查询参数
      this.$emit('current-page-change', val)
    }
  }
}
</script>

<style>
    .pagination-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
